<template>
	<view class="flex-row">
		<xbc-message-read v-if="message && message.createTime" :show="showReadStatus && !['group'].includes(message.conversationType) && isSenderThemselve" :isRead="isRead" />
		<xbc-loading v-if="!message.createTime"></xbc-loading>
		<view @tap="openFile" class="chat-message-file flex-row" :class="{reverse: isReverse && isSenderThemselve}">
			<view class="chat-message-file-info">
				<view class="chat-message-file-name">{{ file.name }}</view>
				<view class="chat-message-file-size">{{ file.size }}</view>
			</view>
			<image class="chat-message-file-icon" :src="file.icon" />
		</view>
	</view>
</template>

<script>
import XBCIM from 'xbcim'
import mixins from '@/mixins'
import { messageProps } from '@/hooks/useMessage'

export default{
	mixins: [mixins],
	props: messageProps,
	computed: {
		file(){
			const name = this.messageContent.data?.name || '未知文件'
			const size =  XBCIM.util.formatBytes(this.messageContent.data?.size || '')
			const ext = name.split('.').pop()
			const icon = `/static/img/svg/${XBCIM.util.getFileType(ext)}.svg`
			return { name, ext, icon, size }
		}
	},
	methods: {
		openFile() {
			uni.downloadFile({
				url: encodeURIComponent(this.messageContent.data.url),
				success: res => {
					uni.openDocument({
						filePath: res.tempFilePath,
						showMenu: true,
						fail(error){
							uni.showToast({
								icon: 'none',
								title: '文件打开失败'
							})
						}
					})
				},
				fail(){
					uni.showToast({
						icon: 'none',
						title: '文件下载失败'
					})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.chat-message-file {
	flex: 1;
	color: #333;
	cursor: pointer;
	padding: 20rpx 24rpx;
	align-items: flex-start;
	transition: all 0.1s ease;
	border-radius: 0 10rpx 10rpx 10rpx;
	background-color: rgba(0, 0, 0, 0.05);

	&:hover {
		background-color: rgba(0, 0, 0, 0.08);
	}

	&.reverse {
		border-radius: 10rpx 0 10rpx 10rpx;
	}

	&-info {
		flex: 1;
		margin-right: 20rpx;
	}

	&-name {
		color: #333;
		max-width: 360rpx;
		font-size: 30rpx;
		font-weight: 500;
		margin-bottom: 10rpx;
		@include text-ellipsis(2);
	}

	&-size {
		font-size: 26rpx;
		color: #999;
	}

	&-icon {
		height: 96rpx;
		max-width: 100rpx;
	}
}
</style>